<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .calendar{
      width: 200px;
    }
    .calendar-input{
      height: 25px;
      line-height: 25px;
      width: 200px;
      border-radius: 5px;
    }
    .calendar-main{
      display: none;
      position: relative;;
      height: 200px;
      width: 200px;
      border: 1px solid #555;
      border-radius: 10px;
    }
    .calendar-close{
      position: absolute;
      right: 3px;
      top: 3px;
      height: 10px;
      width: 10px;
      font-size: 10px;
      line-height: 10px;
      border: 1px solid #555;
      border-radius: 50%;
      text-align: center;
    }
    .calendar-days{
      position: absolute;
      top:40px;
      left: 9px;
    }
    .calendar-day{
      display: inline-block;
      width: 24px;
      height: 22px;
      line-height: 22px;
      text-align: center;
      border: 1px solid #555;
    }
  </style>
</head>
<body>
  <div class="calendar">
    <input class="calendar-input">
    <div class="calendar-main">
      <div class="calendar-close">*</div>
      <div class="calendar-days">

      </div>
    </div>
  </div>


  <script>
  var isleapYear = function(year){
    return (year % 4 === 0 && year % 100 !=0) || (year % 400) === 0
  }

  //how much days in a specific month
  var daysInMonth = function(year, month){
    switch(month){
      case 4:
      case 6:
      case 9:
      case 11:
      return 30;
      case 2:
      return isleapYear(year) ? 29 : 28
      default:
      return 31;
    }
  }
  var whatDayforFirstDay = function(year, month){
    var day = new Date(year, month-1, 1)
    return day.getDay()  //1 mon; 0 sun;
  }

  

  var today = new Date()
  var y = today.getFullYear()
  var m = today.getMonth() + 1
  var d = today.getDate()  //1-31
  var wd = today.getDay()  //0,6

  var calendar = document.querySelectorAll('.calendar')[0]
  var calendarInput = document.querySelectorAll('.calendar-input')[0]
  var calendarMain = document.querySelectorAll('.calendar-main')[0]
  var calendarClose = document.querySelectorAll('.calendar-close')[0]
  var calendarDays = document.querySelectorAll('.calendar-days')[0]
  var day
  var weekds = ["日","一","二","三","四","五","六"]
  for(var j = 0; j < 7; j++){
    day = document.createElement('div')
    day.className = "calendar-day"
    day.innerHTML = weekds[j]
    calendarDays.appendChild(day)
  }
  for(var j = whatDayforFirstDay(y,m); j>0;j--){
    day = document.createElement('div')
    day.className = "calendar-day"
    day.innerHTML = '.'
    calendarDays.appendChild(day)
  }
  for(var i = 1; i<daysInMonth(y,m)+1; i++){
    day = document.createElement('div')
    day.className = "calendar-day"
    day.innerHTML = i
    calendarDays.appendChild(day)
  }
  calendarInput.onfocus = function(){
    calendarMain.style.display = "block"

  }
  calendarClose.onclick = function(){
    calendarMain.style.display = "none"
  }
  </script>
</body>
</html>
